React Hooks হল React 16.8 এ পরিচিত একটি ফিচার যা ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফসাইকেল ফিচার ব্যবহারের সুযোগ দেয়। এর মধ্যে useState এবং useEffect দুটি গুরুত্বপূর্ণ হুক। চলুন, এগুলোর ব্যবহার বিস্তারিতভাবে দেখে নেওয়া যাক।
useState Hook
useState হুক React ফাংশনাল কম্পোনেন্টে স্টেট ম্যানেজমেন্ট করার জন্য ব্যবহৃত হয়। এটি আপনাকে কম্পোনেন্টের মধ্যে স্টেট তৈরি ও আপডেট করতে সহায়তা করে।
ব্যবহার:
import React, { useState } from 'react';
function Counter() {
// useState ব্যবহার করে 'count' নামের একটি স্টেট তৈরি করা হলো এবং সেটি 0 দ্বারা ইনিশিয়ালাইজ করা হয়েছে।
const [count, setCount] = useState(0);
// স্টেট পরিবর্তন করার জন্য 'setCount' ফাংশনটি ব্যবহার করা হবে
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
}
export default Counter;বিস্তারিত ব্যাখ্যা:
useState(0)একটি স্টেট ভ্যারিয়েবল তৈরি করে যার প্রাথমিক মান0। এই ভ্যারিয়েবলটি হলোcount, এবং স্টেট আপডেট করার জন্য ব্যবহৃত ফাংশনটি হলোsetCount।setCount(count + 1)বাsetCount(count - 1)ব্যবহার করে স্টেট আপডেট করা হয়। যখনই স্টেট পরিবর্তিত হয়, কম্পোনেন্টটি পুনরায় রেন্ডার হয় এবং UI আপডেট হয়।
useEffect Hook
useEffect হুক React ফাংশনাল কম্পোনেন্টে লাইফসাইকেল মেথড (যেমন componentDidMount, componentDidUpdate, componentWillUnmount) ব্যবহার করার জন্য ব্যবহৃত হয়। এটি সাইড ইফেক্ট (side effects) পরিচালনা করতে, যেমন ডেটা ফেচিং, সাবস্ক্রিপশন, টাইটল আপডেট ইত্যাদি, কাজে আসে।
ব্যবহার:
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
// Clean-up function: interval বন্ধ করার জন্য
return () => clearInterval(interval);
}, []); // Empty dependency array means this effect runs only once when the component mounts.
return (
<div>
<p>Time: {seconds} seconds</p>
</div>
);
}
export default Timer;বিস্তারিত ব্যাখ্যা:
useEffectএর প্রথম আর্গুমেন্ট হলো একটি ফাংশন, যা কম্পোনেন্টের রেন্ডার হওয়ার পর রান হবে।setIntervalফাংশন ব্যবহার করে প্রতি সেকেন্ডেsecondsস্টেট আপডেট করা হচ্ছে।- দ্বিতীয় আর্গুমেন্ট
[]নির্ধারণ করে যে এই ইফেক্টটি কেবল কম্পোনেন্টের প্রথম রেন্ডার (mount) এর সময়ই রান করবে। এর মানে হলো, এটি কম্পোনেন্টটি প্রথমবার রেন্ডার হওয়ার পর একবারই কার্যকর হবে। clearInterval(interval)হল ক্লিনআপ ফাংশন, যাuseEffectএর ভিতরে ডিফাইন করা হয় এবং কম্পোনেন্টটি আনমাউন্ট (unmount) হওয়ার পর সেটি ইনটারভ্যালকে ক্লিয়ার করে।
useState এবং useEffect এর মধ্যে সম্পর্ক
useStateস্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, যেখানেuseEffectসেই স্টেটের পরিবর্তনের ভিত্তিতে বা কম্পোনেন্টের জীবনের বিভিন্ন পর্যায়ে সাইড ইফেক্ট পরিচালনা করতে ব্যবহৃত হয়।- সাধারণত,
useStateব্যবহার করে স্টেট তৈরি করা হয় এবংuseEffectব্যবহার করে স্টেটের পরিবর্তন বা কম্পোনেন্টের রেন্ডার শেষে সাইড ইফেক্ট তৈরি বা আপডেট করা হয়।
উদাহরণ: স্টেট পরিবর্তনের পর ডেটা ফেচিং
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
// useEffect ব্যবহার করে ডেটা ফেচিং
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setIsLoading(false);
});
}, []); // কম্পোনেন্ট মাউন্ট হওয়ার পর একবারই রান হবে
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
<h1>Fetched Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default DataFetcher;বিস্তারিত ব্যাখ্যা:
useStateদ্বারাdataএবংisLoadingস্টেট তৈরি করা হয়েছে।useEffectএর মাধ্যমেfetchAPI কল করা হয়েছে এবং ডেটা ফেচিংয়ের পর সেটিsetDataদিয়ে স্টেটে রাখা হয়েছে।- যখন ডেটা আসবে, তখন
isLoadingস্টেটfalseহয়ে যাবে এবং UI আপডেট হবে।
সারাংশ
useState: ফাংশনাল কম্পোনেন্টে স্টেট ম্যানেজমেন্ট করতে ব্যবহৃত হয়।useEffect: লাইফসাইকেল মেথডের মতো কাজ করে এবং সাইড ইফেক্টগুলি পরিচালনা করতে ব্যবহৃত হয়, যেমন ডেটা ফেচিং, সাবস্ক্রিপশন, ইভেন্ট লিসেনার যোগ করা ইত্যাদি।
Content added By
Read more
